<template>
    <div class="info">
        <!-- 个人信息 -->
        <van-nav-bar left-arrow @click-left="$router.back()" right-text="保存" @click-right="onClickRight" :fixed="true" title="个人信息" class="i-title" z-index="99" />
        <!-- 头像 & 昵称 & 介绍 -->
        <van-cell-group>
            <van-cell @click="upldateimg" title="头像" is-link>
                <template #default>
                    <img style="width:30px;height:30px;border-radius:50%" :src="userObj.photo" alt="">
                </template>
            </van-cell>
            <van-cell @click="nameShow=true" title="昵称" is-link :value="userObj.name"/>
            <van-cell @click="introShow=true" title="介绍" is-link :value="userObj.intro" />
        </van-cell-group>
        <!-- 性别 & 生日 -->
        <van-cell-group>
            <van-cell @click="genderShow=true" title="性别" :value="userObj.gender == 0?'男':'女'" />
            <van-cell @click="birthShow=true" title="生日" :value="userObj.birthday" />
        </van-cell-group>
        <!-- 修改姓名弹窗 -->
        <van-popup v-model="nameShow" position="bottom" :style="{ height: '8%' }">
            <van-cell-group>
              <van-field v-model="userObj.name" required />
            </van-cell-group>
        </van-popup>
        <!-- 修改介绍弹窗 -->
        <van-popup v-model="introShow" position="bottom" :style="{ height: '8%' }">
            <van-cell-group>
              <van-field v-model="userObj.intro" required />
            </van-cell-group>
        </van-popup>
        <!-- 修改性别 -->
        <van-popup v-model="genderShow" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
        </van-popup>
        <!-- 修改生日 -->
        <van-popup v-model="birthShow" position="bottom" :style="{ height: '50%' }">
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="confirm"
            />
        </van-popup>
        <!-- 头像上传框 -->
        <imgpop ref="imgpop" @passPhoto="passPhoto" />
    </div>
</template>
<script>
import dayjs from 'dayjs'
import imgpop from './com/imgpop'
import { apiUserData, apiProfile, apiUpdateProfile } from '@/api/my.js'
export default {
  components: {
    imgpop
  },
  data () {
    return {
      userObj: {},
      // 控制修改名称弹出层是否显示
      nameShow: false,
      // 控制修改介绍弹出层是否显示
      introShow: false,
      // 控制修改性别弹出层是否显示
      genderShow: false,
      // 选择器
      columns: ['男', '女'],
      // 控制修改生日弹出层是否显示
      birthShow: false,
      // 可选的最小时间，精确到分钟
      minDate: new Date(1990, 0, 1),
      // 可选的最大时间，精确到分钟
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    }
  },
  methods: {
    // 修改生日确认按钮
    confirm (value) {
      // 关闭弹窗
      this.birthShow = false
      const time = dayjs(value).format('YYYY-MM-DD')
      this.userObj.birthday = time
    },
    // 修改性别确认按钮
    onConfirm (value, index) {
      // 确认时,关闭弹窗显示当前值到页面上
      this.genderShow = false
      this.$toast(`当前值：${value},当前索引：${index}`)
      this.userObj.gender = index
    },
    onCancel () {
      this.$toast('取消')
    },
    // 上传头像
    passPhoto (photo) {
      this.userObj.photo = photo
    },
    // 打开头像面板
    upldateimg () {
      this.$refs.imgpop.show = true
    },
    // 保存信息
    async onClickRight () {
      try {
        const res3 = apiUpdateProfile(this.userObj)
        window.console.log('保存:', res3)
        this.$toast.success('保存成功')
      } catch (error) {
        this.$toast.success(error.messagr)
      }
    }
  },
  async created () {
    const res1 = await apiUserData()
    this.$set(this.userObj, 'photo', res1.data.data.photo)
    this.$set(this.userObj, 'name', res1.data.data.name)
    this.$set(this.userObj, 'intro', res1.data.data.intro)
    const res2 = await apiProfile()
    window.console.log('生日性别:', res2)
    this.$set(this.userObj, 'birthday', res2.data.data.birthday)
    this.$set(this.userObj, 'gender', res2.data.data.gender)
  }
}
</script>

<style lang="less" scoped>
.info {
    margin-top: 46px;
    .i-title {
        background-color: #3e9df8;
        /deep/ .van-nav-bar__title {
            color: #fff;
        }
        /deep/.van-icon {
            color: #fff;
        }
        /deep/ .van-nav-bar__text {
            color: #fff;
        }
    }
}
</style>
